<template>
  <div class="feedback">
    <mu-appbar :z-depth="0" style="width: 100%;top:0" color="white" text-color="primary">
      <mu-button icon slot="left">
        <header-back></header-back>
      </mu-button>
      意见反馈
      <mu-button style="font-size: 20px;width: 80px" icon slot="right" @click="submit">
        提交
      </mu-button>
    </mu-appbar>
    <div class="loadmore-wrap">
      <mu-form :model="form" class="mu-demo-form" label-width="100">
        <mu-list>
          <mu-sub-header>(必选)请选择你想反馈的问题点</mu-sub-header>
          <mu-paper round :z-depth="0">
            <mu-list-item>
              <mu-list-item-action>
                <mu-radio v-model="form.subject" style="margin-right: 16px;" value="功能异常：功能故障或不可用"
                          label=""></mu-radio>
              </mu-list-item-action>
              <mu-list-item-content>
                <mu-list-item-title>功能异常：功能故障或不可用</mu-list-item-title>
              </mu-list-item-content>
            </mu-list-item>
            <mu-divider inset></mu-divider>
            <mu-list-item>
              <mu-list-item-action>
                <mu-radio v-model="form.subject" value="产品建议：用的不爽，我有建议" label=""></mu-radio>
              </mu-list-item-action>
              <mu-list-item-content>
                <mu-list-item-title>产品建议：用的不爽，我有建议</mu-list-item-title>
              </mu-list-item-content>
            </mu-list-item>
            <mu-divider inset></mu-divider>
            <mu-list-item>
              <mu-list-item-action>
                <mu-radio v-model="form.subject" value="安全问题：密码，隐私，欺诈等" label=""></mu-radio>
              </mu-list-item-action>
              <mu-list-item-content>
                <mu-list-item-title>安全问题：密码，隐私，欺诈等</mu-list-item-title>
              </mu-list-item-content>
            </mu-list-item>
            <mu-divider inset></mu-divider>
            <mu-list-item>
              <mu-list-item-action>
                <mu-radio v-model="form.subject" value="其他问题" label=""></mu-radio>
              </mu-list-item-action>
              <mu-list-item-content>
                <mu-list-item-title>其他问题</mu-list-item-title>
              </mu-list-item-content>
            </mu-list-item>
          </mu-paper>
        </mu-list>
        <mu-list>
          <mu-sub-header>请补充详细问题和意见</mu-sub-header>
          <mu-paper style="padding-bottom: 3px" round :z-depth="0">
            <mu-form-item style="padding:0 1rem 0 1rem;margin: 1rem 0 2rem 0" prop="body" :rules="bodyRules">
              <mu-text-field v-model="form.body" color="primary"
                             full-width
                             solo :max-length="240"
                             multi-line :rows="5"
                             placeholder="请输入不少于10个字的描述"></mu-text-field>
            </mu-form-item>
          </mu-paper>
        </mu-list>
      </mu-form>
    </div>
  </div>
</template>
<script>
  import headerBack from '@/components/headerBack';

  export default {
    name: 'feedback',
    data() {
      return {
        bodyRules: [
          {validate: (val) => !!val, message: '必须填写问题和意见'}
        ],
        form: {
          body: '',
          subject: '其他问题'
        }
      }
    },
    components: {
      headerBack
    },
    methods: {
      submit() {
        this.postRequest("/feedback/submit", this.form).then(res => {
          if (res.code === 200) {
            this.$toast.success("提交成功");
          }
        });
      }
    },
    mounted: function () {

    }
  }
</script>

<style scoped lang="less">

  .feedback {
    position: fixed;
    top: 0;
    width: 100%;
    /*overflow: auto;*/
    height: 100%;
    z-index: 999;
    background-color: #f9f9f9;
  }

  .loadmore-wrap {
    width: 100%;
    height: 90%;
    overflow: scroll;
  }

</style>
